<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no ">
		
		<!-- Bootstrap-->
		<link href="../static/css/bootstrap.min.css" rel="stylesheet">
		
		<!-- Bootstrap -->
		<script src="../static/js/jquery-latest.js"></script>
		<script src="../static/js/bootstrap.min.js"></script>
		
		<script type="text/javascript">
		  function initialize() {
			var mapOptions = {
			  center: new google.maps.LatLng(-34.397, 150.644),
			  zoom: 8,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			var map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);
		  }
		  function loadScript() {
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
				document.body.appendChild(script);
			}
			window.onload = loadScript;
		</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="span12">
					<div class="jumbotron">
						<div class="container">
							<h1>Hello world</h1>
							<div id="map_canvas" style="width:100%; height:250px"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
